<template>
    <div>
        <!--
            before-upload: 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
            on-remove: 文件列表移除文件时的钩子。文件列表有一个叉号，点击就会关闭对应的文件列表，触发回调函数
            on-success: 文件上传成功时的钩子
            on-preview: 点击文件列表中已上传的文件时的钩子
            file-list: 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
            show-file-list: 是否显示已上传文件列表
            list-type: 文件列表的类型
            action: 必选参数，上传的地址
            data: 上传时附带的额外参数，我们这里绑定的 dataObj 就附带了发送给阿里云的数据令牌
            预览视图和文件列表时不一样的，文件列表就是文件上传成功时，在按钮下方显示的一个列表，每一项中还显示了图片的名称，
            但是预览图是点击文件列表之后弹出的一个对话框，里面显示了图片样子
        -->
        <el-upload
            action="http://gulimall-graduate.oss-cn-shanghai.aliyuncs.com"
            :data="dataObj"
            list-type="picture"
            :multiple="false"
            :show-file-list="showFileList"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :on-remove="handleRemove"
            :on-success="handleUploadSuccess"
            :on-preview="handlePreview">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
                只能上传 jpg/png 文件，且不超过 10MB
            </div>
        </el-upload>
        <!-- 这个对话框用来显示预览图像 -->
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="fileList[0].url" alt=""/>
        </el-dialog>
    </div>
</template>
<script>
    import {policy} from "./policy";
    import {getUUID} from "@/utils";

    export default {
        name: "singleUpload",
        props: {
            value: String,
        },
        // 下面是三个计算属性：
        computed: {
            imageUrl() {
                return this.value;
            },
            imageName() {
                if (this.value != null && this.value !== "") {
                    return this.value.substr(this.value.lastIndexOf("/") + 1);
                } else {
                    return null;
                }
            },
            fileList() {
                return [
                    {
                        name: this.imageName,
                        url: this.imageUrl,
                    },
                ];
            },
            showFileList: {
                get: function () {
                    return (this.value !== null && this.value !== "" && this.value !== undefined);
                },
                set: function (newValue) {},
            },
        },
        data() {
            return {
                dataObj: {
                    policy: "",
                    signature: "",
                    key: "",
                    ossaccessKeyId: "",
                    dir: "",
                    host: "",
                    // callback:'',
                },
                dialogVisible: false,
            };
        },
        methods: {
            emitInput(val) {
                this.$emit("input", val);
            },
            handleRemove(file, fileList) {
                this.emitInput("");
            },
            // 在图片上传成功之后，点击文件列表的话，会调用这个方法，将 dialogVisible 设置为 true，开启预览视图
            handlePreview(file) {
                console.log("handle preview");
                this.dialogVisible = true;
            },
            // 在正式将图片文件上传之前，从应用服务器获取到阿里云的服务口令，然后再将
            // 服务口令随着图片一起上传
            beforeUpload(file) {
                let _self = this;
                return new Promise((resolve, reject) => {
                    policy().then((response) => {
                            console.log("响应的数据", response);
                            _self.dataObj.policy = response.data.policy;
                            _self.dataObj.signature = response.data.signature;
                            _self.dataObj.ossaccessKeyId = response.data.accessid;
                            _self.dataObj.key = response.data.dir + getUUID() + "_${filename}";
                            _self.dataObj.dir = response.data.dir;
                            _self.dataObj.host = response.data.host;
                            console.log("响应的数据222。。。", _self.dataObj);
                            resolve(true);
                        }).catch((err) => {
                            reject(false);
                        });
                });
            },
            // 在文件上传成功之后，开启文件列表，并且将文件列表中的原有项删除，新增的项的 url 使用真正的图片名替换掉 ${filename}
            // 并且发送 input 命令，更新父组件中的 dataForm.logo 属性的值
            handleUploadSuccess(res, file) {
                console.log("上传成功...");
                this.showFileList = true;
                console.log("fileList:, ", this.fileList);
                this.fileList.pop();
                this.fileList.push({
                    name: file.name,
                    url: this.dataObj.host + "/" + this.dataObj.key.replace("${filename}", file.name),
                });
                this.emitInput(this.fileList[0].url);
            },
        },
    };
</script>
<style>
</style>
